<template>
  <div id="app">
    <div class="block">
    <el-carousel height="150px">
      <el-carousel-item v-for="item in banners" :key="item.id">
        <img class="banner" :src="item.imageUrl" alt="">
      </el-carousel-item>
    </el-carousel>
  </div>
    <Item>
      <img slot="img" :src="dj" alt="" />
      <span slot="icon"  @click="handleOne">热门歌曲</span>
    </Item>
    <div class="aa"> 
    <div class="one" v-for="item of top" :key="item.id">
        <img class="pic" :src="item.coverImgUrl" alt="">
        <p>{{item.name}}</p>
    </div>
    </div>
    <Item>
      <img slot="img" :src="hot" alt="" />
      <span slot="icon" @click="handleTwo">最新音乐</span>
    </Item>
    <div class="aa"> 
    <div class="one" v-for="item of albums" :key="item.id">
        <img class="pic" :src="item.picUrl" alt="">
        <p>{{item.name}}</p>
    </div>
    </div>
    <Item>
      <img slot="img" :src="news" alt="" />
      <span slot="icon" @click="handleThree">主播电台</span>
    </Item>
    <div class="aa"> 
    <div class="one" v-for="item of result" :key="item.id">
        <img class="pic" :src="item.picUrl" alt="">
        <p>{{item.name}}</p>
    </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import dj from "../../assets/dj.png";
import hot from '../../assets/hot.png';
import news from '../../assets/news.png'
export default {
  data() {
    return {
      banners:[],
      top: [],
      dj,
      albums:[],
      hot,
      news,
      result:[]
    };
  },
  mounted() {
    axios.get("http://47.108.197.28:3000/banner").then(res=>{
      // console.log(res.data.banners)
      this.banners = res.data.banners
    })
    axios.get("http://47.108.197.28:3000/top/playlist/highquality").then((res) => {
        // console.log(res.data.playlists);
        this.top = res.data.playlists.slice(0,3);
      });
    axios.get("http://47.108.197.28:3000/album/newest").then(res=>{
        // console.log(res.data.albums)
        this.albums = res.data.albums.slice(0,3);
    })
    axios.get("http://47.108.197.28:3000/personalized/djprogram").then(res=>{
        // console.log(res.data.result)
        this.result = res.data.result.slice(0,3);
    })
  },
  methods:{
      handleOne(){
         this.$router.push(`/musicDetail/?key=1`)
      },
    handleTwo(){
        this.$router.push(`/musicDetail/?key=2`)
    },
    handleThree(){
        this.$router.push(`/musicDetail/?key=3`)
    }
  }
};
</script>

<style scoped>
*{
    margin: 0;
    font-size: 13px;
}
#app {
  width: 460px;
  margin: auto;
  
}
.dj {
  width: 20px;
}
.pic{
    width: 130px;
}
.one{
   padding-left: 10px;
   height: 160px;
}
.aa{
    display: flex;
  justify-content: space-between;
}
.banner{
  width: 460px;
}
</style>